import React, { useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import {View,Image,Text} from '@tarojs/components'
import './index.scss'

export default function SelectCoupon() {
  const [couponList,setCouponList] = useState({})
  const [curCoupon,setCurCoupon] = useState([])
  useDidShow(()=>{
    _initData()
  })
  const _initData = (e,func)=>{
    const {router} = Taro.getCurrentInstance()
    const data = {"orderId": router.params.id,page:1,pageSize:100}
    let url = '/cinema-app/api/v1/order/coupon/ticket'
    if(router.params?.type == 'goods') url = '/cinema-app/api/v1/order/coupon/goods'
    Taro.$get(url,data).then(ret=>{
      if(ret.code == '1'){
        setCouponList(ret.content)
      }else{
        Taro.$toast(ret.message)
      }
    })
  }
  
  const handleRadio = (val,index) =>{
    const {router} = Taro.getCurrentInstance()
    let coupon = [...curCoupon]
    let type = coupon.every(res=>res.voucherType == val.voucherType)
    if(!type){
      Taro.$toast('不同类型的优惠券不能混合使用')
      return;
    }
    ///    点击选择再点击取消
    let value = coupon.findIndex(res=>res.couponNo == val.couponNo)
    if(value !== -1){
      coupon.splice(value,1)
      setCurCoupon(coupon)
      return;
    }
    if(val.voucherType == '1' && coupon.length >= router.params?.seatNum?.length){
      Taro.$toast('一个座位只能用一张兑换券')
      return;
    }
    if(val.voucherType == '2' && coupon.length > 0){
      Taro.$toast('一笔订单只能用一张代金券')
      return;
    }
    if(val.voucherType == '4' && coupon.length >= router.params?.seatNum?.length){
      Taro.$toast('一个座位只能用一张线下券')
      return;
    }
    coupon.push(val)
    setCurCoupon(coupon)
  }
  return (
    <View className='page-select-coupon'>
      <View className="coupon-title">可用优惠券</View>
      {couponList?.availableVoucherList?.length?
      <View className="coupon-list">
        {couponList?.availableVoucherList.map((item,idx)=>{
          return <View className="list-item" key={'index'} onClick={()=>{handleRadio(item,idx)}}>
            <View className="item-header">
              <View className="header-info">
                <View className="info-h2 dot2">
                  {item.voucherTypeDesc?<Text className='h2-span'>{item.voucherTypeDesc}</Text>:null}
                  {item.voucherName}
                </View>
                {item.effectEndDate?<View className="info-p">有效期至 {item.effectEndDate}</View>:null}
              </View>
              {item.couponFace?
              <View className="header-price">
                <View className="price-info"><Text style={{fontSize:10,fontWeight:400}}>¥</Text>{item.couponFace}</View>
                {item.threshold=='有门槛'?`满${item.thresholdValue}减${item.couponFace}`:'无门槛'}
              </View>:null}
            </View>
            <View className="item-footer">
              {item.couponInfo}
              <Image className="item-sele" src={require(!!curCoupon.find(ret=>ret.couponNo == item.couponNo)?'@/images/mine/radio-on.svg':'@/images/mine/radio.svg')} mode='aspectFill'></Image>
            </View>
          </View>
        })}
      </View>:<View className='var-empty'>暂无可用优惠券</View>}
      <View className="coupon-title">不可用优惠券</View>
      {couponList?.notAvailableVoucherList?.length?
      <View className="coupon-list disabled">
        {couponList?.notAvailableVoucherList.map((item,idx)=>{
          return <View className="list-item" key={idx}>
          <View className="item-header">
            <View className="header-info">
              <View className="info-h2 dot2">
                {item.voucherTypeDesc?<Text className='h2-span'>{item.voucherTypeDesc}</Text>:null}
                {item.voucherName}
              </View>
              {item.effectEndDate?<View className="info-p">有效期至 {item.effectEndDate}</View>:null}
            </View>
              {item.couponFace?
              <View className="header-price">
                <View className="price-info"><Text style={{fontSize:10,fontWeight:400}}>¥</Text>{item.couponFace}</View>
                {item.threshold=='有门槛'?`满${item.thresholdValue}减${item.couponFace}`:'无门槛'}
              </View>:null}
          </View>
          <View className="item-footer">
            {item.desc}
            <Image className="item-sele" src={require('@/images/mine/radio.svg')} mode="aspectFill"></Image>
          </View>
        </View>
        })}
      </View>:<View className='var-empty'>暂无不可用优惠券</View>}
      <View className="coupon-footer">
        <View className="footer-button" onClick={()=>{
          const {router} = Taro.getCurrentInstance()
          Taro.eventCenter.trigger('changeCoupon',{[router.params?.type]:curCoupon})
          Taro.navigateBack()
        }}>确认选择</View>
      </View>
    </View>
  )
}
